<template>
	<view class="content">
		<!-- 头像框 -->
		<view class="cd-header-box">
			<view class="cd-header-content">
				<view class="cd-header-item-img">
					<image
						src=""
						mode="widthFix"
					></image>
				</view>
				<view class="cd-header-item-text-box">
					<view class="cd-header-box-text">点击登录</view>
					<view class="cd-header-box-text">></view>
				</view>
			</view>
		</view>
		<!-- 宫格 -->
		<view class="cd-module-box">
			<u-grid :border="true" col="3">
				<u-grid-item v-for="(listItem, listIndex) in list" :key="listIndex">
					<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="listItem.name" :size="22"></u-icon>
					<text class="grid-text">{{ listItem.title }}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<customtabBar></customtabBar>
	</view>
</template>

<script>
import customtabBar from '@/custom-tab-bar/custom-tab-bar.vue';
import { mapMutations } from 'vuex';

export default {
	data() {
		return {
			list: [
				{
					name: 'photo',
					title: '图片'
				},
				{
					name: 'lock',
					title: '锁头'
				},
				{
					name: 'star',
					title: '星星'
				},
				{
					name: 'hourglass',
					title: '沙漏'
				},
				{
					name: 'home',
					title: '首页'
				},
				{
					name: 'star',
					title: '音量'
				},
				{
					name: 'star',
					title: '音量'
				},
				{
					name: 'star',
					title: '音量'
				},
				{
					name: 'star',
					title: '音量'
				},
				{
					name: 'star',
					title: '音量'
				},
				{
					name: 'star',
					title: '音量'
				}
			]
		};
	},
	components: {
		customtabBar
	},
	methods: {
		...mapMutations(['changeIndex'])
	},
	onShow() {
		// this.$store.commit('changeIndex',4)
		this.changeIndex(4);
	}
};
</script>

<style scoped lang="less">
.content {
	background-color: #efefef;
	.cd-header-box {
		padding: 40rpx 20rpx;
		background-color: #333333;
		box-sizing: border-box;
		.cd-header-content {
			// width: 710rpx;
			height: 140rpx;
			display: flex;
			align-items: center;
			.cd-header-item-img {
				width: 128rpx;
				height: 128rpx;
				margin-right: 20rpx;
				image {
					width: 100%;
					border-radius: 100rpx;
				}
			}
			.cd-header-item-text-box {
				flex: 1;
				display: flex;
				justify-content: space-between;
				.cd-header-box-text {
					color: #fff;
					font-size: 28rpx;
				}
			}
		}
	}
	// 宫格
	.cd-module-box {
		.u-grid {
			background-color: #fff;
			.u-grid-item {
				padding: 32rpx 16rpx;
				box-sizing: border-box;
				width: 250rpx;
				height: 250rpx;
				.grid-text {
					font-size: 14px;
					color: #909399;
					padding: 10rpx 0 20rpx 0rpx;
					/* #ifndef APP-PLUS */
					box-sizing: border-box;
					/* #endif */
				}
			}
		}
	}
}
</style>
